import React from 'react';
import { View, Text, Image } from '@tarojs/components';
import pRight from '@/images/common/rightIn.png';
import ProductInfoLine from '../productInfoLine';
import './index.scss';

const Products = ({ products = {}, logisticsAmount = 0 }) => {
  const isMulti = products instanceof Array;
  let totalNum = 0,
    totalPrice = 0;
  if (isMulti) {
    for (let p = 0; p < products.length; p++) {
      totalNum += products[p].quantity;
      totalPrice += Number(products[p].totalPayment);
    }
  } else {
    totalNum = products.quantity;
    totalPrice = products.totalPayment;
  }
  totalPrice += Number(logisticsAmount);
  return (
    <View>
      {isMulti ? (
        products.map((product, index) => {
          return <ProductInfoLine product={product} className={index ? 'mt30' : ''} />;
        })
      ) : (
        <ProductInfoLine product={products} />
      )}
      <View className="flex-row-spaceBetween-center txt28 mt10">
        <Text>配送费</Text>
        <Text>¥{logisticsAmount}</Text>
      </View>
      <View className="diliver"></View>
      <View className="flex-row-spaceBetween-center black085">
        <Text className="txt24">共{totalNum}件商品</Text>
        <Text className="txt26">总计¥{totalPrice.toFixed(2)}</Text>
      </View>
    </View>
  );
};

const ProductListMore = ({ product = {}, logisticsAmount, className = '', title = '' }) => {
  return (
    <View className={'box2 ProductListMore ' + className}>
      <View className="flex-row--center txt26 black0 title">
        {title}
        <Image className="rightIcon" src={pRight} />
      </View>
      <Products products={product} logisticsAmount={logisticsAmount} />
    </View>
  );
};

export default ProductListMore;
